<template>
	<view class="allNote">
		<view class="note-operate">
			<view class="sort-box">
				<view :class="orderType == 1 ? 'order-approve note-active' : 'order-approve'" @click="changeOrder(1)" >
					按点赞排序
				</view>
				<view :class="orderType == 2 ? 'order-time note-active' : 'order-time'" @click="changeOrder(2)">
					按时间排序
				</view>
			</view>
			
		</view>
		<view>
		
			<view class="item" v-for="(item,index) in otherNote" :key="index">
				<view class="note-top">
					<view class="img">
						<image :src="item.avatarUrl ? item.avatarUrl : 'https://pic.imgdb.cn/item/65cdb4349f345e8d03c21fa4.png'" mode=""></image>
					</view>
					<view class="user-name">
						{{item.userName}}
					</view>
					<view class="note-time">
						{{getTime(item.date)}}
					</view>
				</view>
				<view class="note-content">
					{{item.content}}
				</view>
		<view class="note-approve">
			{{item.approve}}
			<view class="img" @click="like(item._id,index)">
				<image v-if="item.like" src="../../static/approve-active.png" mode="">
				</image>
				<image v-else src="../../static/approve.png" mode=""></image>
			</view>
		</view>
		<view class="note-report">
			<view class="img">
				<image src="../../static/report.png" mode=""></image>
			</view>
		</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onShow,
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"
	import {ref} from 'vue'
	import util from '../../util/index.js'
	import moment from 'moment' 
	const otherNote = ref([])
	const list = []
	const params  =  ref({
		pageNo:1,
		questionId:'',
		orderId:1,
		userId:"undefined"
	})
	onReachBottom(() => {
		console.log('触底')
		params.value.pageNo++
		getCommentList()
	})
	onLoad((query) => {
	
		if(query.questionId) {
		
			params.value.questionId = query.questionId
			getCommentList()
		}
	})
	const getTime = (time) => {
		return moment(time).format("YYYY-MM-DD HH:mm:ss")
	}
	const changeOrder = (e) => {
		params.value.orderId = e
		params.value.pageNo = 1
		otherNote.value = []
		getCommentList()
	}
	const like = (id, index) => {
		if (!otherNote.value[index].like) {
			otherNote.value[index].approve++
			uni.request({
				url: util.baseUrl + '/wxapi/comment/approveComment',
				method: 'POST',
				data: {
					commentId: id
				},
				success: () => {
	
	
					//bgetCommentList(2);
				}
			})
		}
	
		otherNote.value[index].like = true
	
	}
	const getCommentList = () => {
		uni.request({
			url: util.baseUrl + '/wxapi/comment/getCommentList',
			method: 'GET',
			data: params.value,
			success: (res) => {
				
				otherNote.value.push(...res.data.data.result)
				console.log('newData',list)
			}
		})
	}
</script>

<style lang="scss">
	.allNote {
		background-color: #fff;
		padding: 20rpx;
		.note-operate {
			display: flex;
			justify-content: space-between;
			border-bottom: 2rpx solid #bfbfbf;
			padding-bottom: 10rpx;
		}
		.sort-box {
			display: flex;
		
			.order-time {
				margin-left: 20rpx;
			}
			.note-active {
				color: #ffc639;
			}
		}
		.note-operate {
			display: flex;
			justify-content: space-between;
			border-bottom: 2rpx solid #bfbfbf;
			padding-bottom: 10rpx;
		}
		.item {
			position: relative;
			margin-bottom: 5rpx;
			border-bottom: 2rpx solid #bfbfbf;
			background-color: #fff;
		
			.note-top {
				// border-bottom: 1rpx solid #d4d4d4;
				padding: 10rpx 0;
		
				.img {
					width: 100rpx;
					height: 100rpx;
		border-radius: 50%;
		overflow: hidden;
					image {
						width: 100%;
						height: 100%;
					}
				}
		
				.user-name {
					position: absolute;
					left: 120rpx;
					top: 10rpx;
				}
		
				.note-time {
					position: absolute;
					left: 120rpx;
					top: 60rpx;
					font-size: 28rpx;
					color: #9f9f9f;
				}
		
			}
		
			.note-content {
				margin-top: 20rpx;
				font-size: 30rpx;
				margin-bottom: 30rpx;
			}
		
			.note-approve {
				position: absolute;
				display: flex;
				right: 50rpx;
				bottom: 30rpx;
				line-height: 26rpx;
				font-size: 28rpx;
				color: #9f9f9f;
		
				.approve-num {
					margin-right: 10rpx;
				}
		
				.img {
					width: 30rpx;
					height: 30rpx;
		
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		
			.note-report {
				position: absolute;
				right: 50rpx;
				top: 20rpx;
		
				.img {
					width: 30rpx;
					height: 30rpx;
		
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		
	}
</style>